<template>
  <view class="shop_home">
    <view class="demo-nav">
      <view class="demo-nav__title">欧派家居</view>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
      <view class="demo-nav__right">
        <van-icon name="star-o" size="20" color="#000000"/>
        <van-icon name="share-o" size="20" color="#000000"/>
      </view>
    </view>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <view class="shop_home-a">
      <van-row>
        <van-col text="18" style="text-align: left">
          <view style="font-weight: bolder;margin-bottom: 0.5rem">{{this.supplier.shopsName}}</view>
          <van-row style="text-align: center;font-size: 0.6rem">
            <van-col text="8">已成交金额</van-col>
            <van-col text="8">已成交：{{this.count}}件</van-col>
          </van-row>
          <van-row style="text-align: center;font-size: 0.6rem">
            <van-col text="8">{{this.turnover}}w+</van-col>
            <van-col text="8">好评率：87%</van-col>
          </van-row>
        </van-col>
        <van-col text="6" style="text-align: right">
          <van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </van-col>
      </van-row>
    </view>
    <view class="shop_home-b">
      <van-row>
        <van-col text="18" style="text-align: left">
          <van-tag plain type="primary" color="red">店铺优惠券</van-tag>
        </van-col>
        <van-col text="6" style="text-align: right;padding-right: 0.5rem;position: relative">
          <view style="color:red;font-size: 0.9rem;display: inline-block" @click="showCoupon = true">领券<van-icon name="arrow" size="13" color="red"/></view>
        </van-col>
      </van-row>
    </view>
    <van-viewider/>
    <view class="shop_home-c">
      <van-row>
        <van-col text="4">
          <van-icon name="balance-o" size="32" />
        </van-col>
        <van-col text="20" style="text-align: left">
          <view style="padding: 0">商家已缴纳诚信金58000元</view>
          <view style="padding: 0">承诺所承担的业务范围属实</view>
        </van-col>
      </van-row>
    </view>
    <van-viewider/>
    <view class="shop_home-e">
      <van-row>
        <van-col text="6">营业时间：</van-col>
        <van-col text="8" style="text-align: left">24小时</van-col>
      </van-row>
      <van-row>
        <van-col text="6">店铺地址：</van-col>
        <van-col text="8" style="text-align: left">{{this.supplier.address}}</van-col>
        <van-col text="8" style="text-align: right">1.8km</van-col>
      </van-row>
    </view>
    <van-viewider/>
    <view class="shop_home-i" align="left">
      <view style="font-size: 1rem;text-align: center">精选商品</view>
      <view class="shop_home-i-content" v-for="product in productList" :key="product.productId" @click="toDetails(product.productId)">
        <van-image height="8rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
        <view align="left">{{product.productName}}</view>
        <view align="left" style="font-size: 0.8rem;font-weight: bolder">成交价：<text>{{product.price}}￥</text></view>
<!--        <van-row style="font-size: 0.8rem;font-weight: bolder">-->
<!--          <van-col text="16" style="text-align: left">成交价：</van-col>-->
<!--          <van-col text="8" style="text-align: left">{{product.price}}</van-col>-->
<!--        </van-row>-->
<!--        <van-row style="font-size: 0.5rem">-->
<!--          <van-col text="12" style="text-align: left">门店成交价：</van-col>-->
<!--          <van-col text="8" style="text-align: left">999.00</van-col>-->
<!--        </van-row>-->
        <van-button round type="primary" size="small" style="width: 8rem;margin-top: 0.2rem">立即购买</van-button>
      </view>
    </view>

    <van-popup v-model="showCoupon" round position="bottom" closeable :style="{ height: '70%' }">
      <view class="container">
        <h1 style="color: red;font-size: 18px">优惠明细</h1>
        <view class="coupon-list">
          <view class="sawtooth-bor item" v-if="preferentialCard.length >0" v-for="preferential in preferentialCard">
            <view class="pt10 discount" style="padding-top: 10px;">
              <view class="fs12">{{preferential.preferentialName}}</view>
              <view class="fs12">满{{preferential.preferentialPriceMost}}减{{preferential.preferentialPrice}}</view>
              <view class="fs12">有效期{{preferential.modifiedTime}} - {{preferential.preferentialTime}}</view>
            </view>
            <view class="textc receive">立即领取</view>
          </view>
          <van-viewider />
          <h1 style="color: red;font-size: 18px;margin-bottom: 0.5rem">平台优惠活动</h1>
          <view class="sawtooth-bor item">
            <view class="pt10 discount" style="padding-top: 10px;">
              <view class="fs12">{{platformCoupon.platformName}}</view>
              <view class="fs12">满{{platformCoupon.platformPriceMost}}减{{platformCoupon.platformPrice}}</view>
              <view class="fs12">有效期{{platformCoupon.platformTimeStart}} - {{platformCoupon.platformTimeEnd}}</view>
            </view>
            <view class="textc receive">立即领取</view>
          </view>
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script>

  import { selectSupplierById,selectProductBySupplierId,selectSupplierCoupon } from '@/api/commodity/shop_product.js'

  export default {
    name: "shop_home",
    data(){
      return{
        images: [
          'https://img.yzcdn.cn/vant/apple-1.jpg',
          'https://img.yzcdn.cn/vant/apple-2.jpg',
        ],
        current: 0,
        // 店铺
        supplier: Object,
        // 精品商品
        productList: [],
        // 成交量
        count: Number,
        // 成交额
        turnover: Number,
        // 查看店铺优惠券
        showCoupon: false,
        // 平台优惠券
        platformCoupon :null,
        // 店铺优惠券
        preferentialCard :null,
      }
    },
	onLoad(openid) {
		var id = openid.shopId;
		this.getSupplierById(id);
		this.getProductBySupplierId(id);
		this.getSupplierCoupon(id);
	},
    created() {
    
    },
    methods: {
      toBack(){
        this.$router.go(-1);//返回上一层
      },
      onChange(index) {
        this.current = index;
      },
      toDetails(productId){
        this.$router.push({path:"/commodity_details",query:{commodityId:productId}});
      },
      /**根据供应商ID查询供应商信息 */
      getSupplierById(supplierId){
        selectSupplierById(supplierId).then((res) => {
          this.supplier = res.data.data.supplier;
          this.count = res.data.data.count;
          let turnover = res.data.data.turnover;
          if(turnover>=10000){
            this.turnover = parseInt(turnover*0.0001);
          }else{
            this.turnover = parseFloat(turnover*0.0001).toFixed(1);
          }
        });
      },
      /**根据供应商ID查询商品信息 */
      getProductBySupplierId(supplierId){
        selectProductBySupplierId(supplierId).then((res) => {
          this.productList = res.data.data;
        });
      },
      getSupplierCoupon(id){
        selectSupplierCoupon(id).then((res) =>{
          this.preferentialCard = res.data.preferentialCard;
          this.platformCoupon = res.data.platformCoupon;
          console.log(res.data)
        })
      }
    }
  }
</script>

<style scoped>
  .shop_home{
    color: black;
  }
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .demo-nav__right{
    position: absolute;
    top: 18px;
    right: 16px;
  }
  .shop_home-a{
    padding: 0.5rem 1rem;
  }
  .shop_home-a p{
    font-size: 0.8rem;
  }
  .shop_home-b{
    padding: 0 1rem;
  }
  .shop_home-c{
    padding: 0.3rem 1rem;
  }
  .shop_home-c p{
    font-size: 0.75rem;
    padding: 0.2rem 0;
  }
  .shop_home-e{
    padding: 0.3rem 1rem;
    position: relative;
    font-size: 0.5rem;
  }
  .shop_home-i{
    padding: 0.3rem 1rem;
  }
  .shop_home-i p{
    font-size: 0.6rem;
  }
  .shop_home-i-content{
    display: inline-block;
    margin: 0.4rem;
    width: 46%;
    text-align: center;
  }

  .container {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 18px;
  }

  .coupon-list {
    width: 370px;
    margin: 0 auto;
  }

  .coupon-list .item:first-child {
    margin-top: 20px;
  }

  .coupon-list .item {
    width: 370px;
    height: 90px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  /* 第一个 */
  .sawtooth-bor {
    display: flex;
    color: #fff;
    padding-left: 0.5rem;
    box-sizing: border-box;
    /* 画出一个半径为8rpx的透明的圆，透明圆以外都是#ffb937颜色 */
    background: radial-gradient(transparent 0, transparent 8px, #F35C3B 8px);
    /* 截取上面生成的渐变图的一部分，相当于截取30rpx的正方形中有一个直径10px的透明圆点 */
    background-size: 30px 28px;
    /* 根据优惠券view大小进行微调 */
    background-position: 16px 0px;
    background-color: #fff;
    position: relative;
  }

  .sawtooth-bor:before {
    content: ' ';
    display: block;
    /* 用相同的颜色覆盖 */
    background-color: #F35C3B;
    /* 绝对定位，遮住中间所有的洞，只保留边角的锯齿 */
    position: absolute;
    top: 0;
    bottom: 0;
    /* 为锯齿保留的距离 */
    left: 20px;
    right: 20px;
    z-index: -1;
  }

  .discount {
    border-right: 2px dashed #f5f5f5;
    padding: 10px;
    flex: 1;
    box-sizing: border-box;
    background-color: #F35C3B;
  }

  .receive {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 104px;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #ffb937;
  }
</style>
